<template>
	<div id="cart">

		<div class="cart_content">

			<div class="cart_info">

				<h2>购物车</h2>

				<div class="p_number">
					<div class="p_number_left">
						<p>用餐人数:{{peopleInfoList.p_num}}</p>
						<p>备注: 
							<span v-if="!peopleInfoList.p_mark">无</span>
							<span v-if="peopleInfoList.p_mark">{{peopleInfoList.p_mark}}</span>
						</p>
					</div>
					<div class="p_number_right">
						<router-link to="edit">
							<img src="../assets/images/edit.png" />
							<p>修改</p>
						</router-link>
					</div>

				</div>

				<div class="cart_p_num" v-if="num">

					<p>购物车中总共有{{num}}个菜</p>

					
						
	       			<p>合计：<span class="price">¥{{Price}}</span></p>
					
				</div>
			</div>

			<div class="cart_list">

				<ul>
					

					

					<li class="item" v-for="(item,key) in list">
						<div class="left_food">
							<img :src="api+item.img_url" />
							<div class="food_info">
								<p>{{item.title}}</p>
								<p class="price">¥{{item.price}}</p>
							</div>

						</div>

						<div id="right_cart">
							<div class="cart_num">
								<div class="input_left" @click="delNum(item,key)">-</div>
								<div class="input_center">
									<input type="text" v-model="item.num" readonly="readonly" value="1" name="num" id="num" />
								</div>
								<div class="input_right" @click="incNum(item,key)">+</div>
							</div>
						</div>

					</li>
				</ul>
			</div>

			<div class="hot_food">

				<h3>本店顾客最长点的菜</h3>

				<div class="item_list_outer">
					<ul class="item_list">
						<li>
							<div class="inner">
								<img src="../assets/images/1.jpg" />
								<p class="title">大蒜腊肉</p>
								<p class="price">¥26</p>
							</div>
						</li>

						<li>
							<div class="inner">
								<img src="../assets/images/2.jpg" />

								<p class="title">家乡扣肉</p>

								<p class="price">¥26</p>
							</div>

						</li>

						<li>
							<div class="inner">
								<img src="../assets/images/1.jpg" />
								<p class="title">大蒜腊肉</p>
								<p class="price">¥26</p>
							</div>
						</li>

						<li>
							<div class="inner">
								<img src="../assets/images/2.jpg" />

								<p class="title">家乡扣肉</p>

								<p class="price">¥26</p>
							</div>

						</li>

						<li>
							<div class="inner">
								<img src="../assets/images/2.jpg" />

								<p class="title">家乡扣肉</p>

								<p class="price">¥26</p>
							</div>

						</li>

					</ul>

				</div>

			</div>
		</div>

		<v-footernav></v-footernav>


		<router-link to="home">
			<div id="footer_book" class="footer_book">
				<img src="../assets/images/menu.png" />
				<p>菜单</p>
			</div>
		</router-link>

		<div id="footer_cart" class="footer_cart">
			<img src="../assets/images/cart.png" />
			<p>购物车</p>
		</div>

	</div>
</template>
<script>
	//引入组件
	import FooterNav from './public/FooterNav.vue';
	//引入公共配置文件
	import Config from '../model/config.js';
	export default {
		name: 'app',
		data() {
			return {
				api: Config.host,
				list:[],
				price:0,
				num:0,
				peopleInfoList:[]
				
			}
		},
		methods: {
			//请求数据
			requestData() {

				var api=this.api+'api/cartlist?uid=a001';
  		
  				this.$http.get(api).then((response)=>{
  				
  				
  				console.log(response);
          			 this.list=response.body.result;
          			 this.allPrice();
					
           
	                                
		        },(err)=>{
		
		            console.log(err);
		        })
	      
	
			},
			delNum(item,key){
				
				
		
				
				var product_id=item.product_id;
				var num=item.num;
  		
  				var api=this.api+'api/decCart?uid=a001&product_id='+product_id+'&num='+num;
  		
  				this.$http.get(api).then((response)=>{
          			
						this.allPrice();
           
	                                
		        },(err)=>{
		
		            console.log(err);
		        })
				
			
				if(item.num==1){
					
					this.list.splice(key,1);
				}else{
					item.num--;
				}
				
			},
			incNum(item,key){
				
				var product_id=item.product_id;
				var num=item.num;
  		
  				var api=this.api+'api/incCart?uid=a001&product_id='+product_id+'&num='+num;
  		
  				this.$http.get(api).then((response)=>{
          			

           			this.allPrice();
	                                
		        },(err)=>{
		
		            console.log(err);
		        })
				
				item.num++;
				
			},
			allPrice(){
				var allPrice=0
				var num=0
				for(var i=0;i<this.list.length;i++){
					
					allPrice+=parseFloat(this.list[i].num*this.list[i].price);
					num+=this.list[i].num;
					
					
				}
				this.price=allPrice;
				this.num=num;
			},
			getPeopleInfo(){
				
				
				
				var api=this.api+'api/peopleInfolist?uid=a002';
  		
  				this.$http.get(api).then((response)=>{
  				
          			
          			
          			this.peopleInfoList=response.body.result[0];
          		
           
	                                
		        },(err)=>{
		
		            console.log(err);
		        })
			}
			
		},
		mounted() {
			this.requestData();
			this.getPeopleInfo();
		},
		components: {
			'v-footernav': FooterNav
		}
	}
</script>
<style lang="scss">
	.cart_content {
		padding: 1rem;
		/*头部信息*/
		.cart_info {
			background: #fff;
			h2 {
				text-align: center;
				font-size: 1.8rem;
				padding: .8rem 0px;
				border-bottom: 1px solid #eee;
			}
			border-radius:.5rem;
			padding: .5rem;
			.p_number {
				display: flex;
				padding: .5rem 0;
				border-bottom: 1px solid #eee;
				.p_number_left {
					flex: 1;
					p {
						line-height: 2;
						&:first-child {
							color: red;
						}
					}
				}
				.p_number_right {
					width: 4rem;
					height: 4rem;
					text-align: center;
					img {
						width: 1.8rem;
						height: 1.8rem;
						margin: 0 auto;
					}
				}
			}
			/*购物车总数量*/
			.cart_p_num {
				border-bottom: 1px solid #eee;
				p {
					line-height: 2;
					.price {
						font-size: 2.4rem;
						color: red;
					}
				}
			}
		}
		/*购物车列表*/
		.cart_list {
			margin-top: 1rem;
			padding: .5rem;
			background: #fff;
			border-radius: .5rem;
			display: flex;
			ul {
				width: 100%;
				.item {
					display: flex;
					width: 100%;
					border-bottom: 1px solid #eee;
					padding: 1rem 0px;
					.left_food {
						flex: 1;
						display: flex;
						img {
							width: 4rem;
							height: 4rem;
							border-radius: 10%;
							margin-right: .8rem;
						}
						.food_info {
							flex: 1;
						}
					}
					.right_cart {
						width: 10rem;
					}
				}
			}
		}
		/*最长点的菜*/
		.hot_food {
			background: #fff;
			margin-top: 1rem;
			border-radius: .5rem;
			margin-bottom: 4rem;
			h3 {
				font-size: 1.4rem;
				padding: .5rem 0px;
			}
			.item_list_outer {
				width: 100%;
				overflow-x: auto;
				.item_list {
					padding: 0px .5rem;
					width: 50rem;
					li {
						width: 8rem;
						padding: .5rem;
						box-sizing: border-box;
						float: left;
						.inner {
							background: #fff;
							width: 100%;
							border-radius: .5rem;
							overflow: hidden;
							img {
								width: 100%;
							}
						}
					}
				}
			}
		}
	}
	/*购车加减*/
	
	.cart_num {
		width: 10rem;
		display: flex;
		margin-top: .8rem;
		.input_left,
		.input_right {
			flex: 1;
			width: 2.8rem;
			height: 2.8rem;
			line-height: 2.8rem;
			text-align: center;
			color: red;
			border: 1px solid #eee;
			font-size: 2.4rem;
		}
		.input_center {
			flex: 1;
			input {
				width: 2rem;
				text-align: center;
				width: 100%;
				height: 2.8rem;
				border: none;
				border-top: 1px solid #eee;
				border-bottom: 1px solid #eee;
				float: left;
			}
		}
	}
	/*购车空*/
	
	.cart_empty {
		text-align: center;
		line-height: 3;
		h3 {
			font-size: 1.8rem;
		}
	}
</style>